'use client';

import { ReactNode, useEffect, useRef, useState } from 'react';

interface AnimatedSectionProps {
  children: ReactNode;
  className?: string;
  delay?: number;
  threshold?: number;
  duration?: '300' | '500' | '800';
  animation?: 'fadeInUp' | 'fadeInDown' | 'fadeInLeft' | 'fadeInRight';
}

export default function AnimatedSection({
  children,
  className = '',
  delay = 0,
  threshold = 0.1,
  duration = '500', 
  animation = 'fadeInUp'
}: AnimatedSectionProps) {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.unobserve(entry.target);
        }
      },
      {
        threshold,
        rootMargin: '0px 0px -100px 0px'
      }
    );

    const currentRef = sectionRef.current;
    if (currentRef) {
      observer.observe(currentRef);
    }

    return () => {
      if (currentRef) {
        observer.unobserve(currentRef);
      }
    };
  }, [threshold]);




  const getAnimationClasses = () => {
    if (!isVisible) return "opacity-0";
    switch(animation) {
      case 'fadeInUp':
        return 'animate-fadeInUp';
      default:
        return '';
    }
  };

  return (
    <div
      ref={sectionRef}
      style={{ 
        animationDelay: `${delay}ms`,
        animationDuration: `${duration}ms`
      }}
      className={`${getAnimationClasses()} ${className}`}
    >
      {children}
    </div>
  );
} 